<template>
  <div class="app-container towTabel">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select placeholder="选择门店" @change="getarea" v-model="formInline.store_id" style="width:300px" filterable>
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px">
            <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select filterable placeholder="选择类型" v-model="formInline.type" style="width:130px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-form-item>
            <el-date-picker style="width:300px" :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange"
              align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <br>
      <el-row class="chart" style="background:#fff;height:450px;" v-loading="loadingChart">
        <div class="bar-legend" style="width:410px">
          <div class="bar-item" style="width:120px">
            <div class="bar-color-ratio">
              <div class="one"></div>
              <div class="tow"></div>
              <div class="three"></div>
              <div class="four"></div>
            </div>
            <span class="text">利率偏差</span>
            <div @click="sortData(0)" class="sort">
              <div class="sort-head" :class="{showTop:showChart==0&&orderRatio==0,showBot:showChart==0&&orderRatio==1}"></div>
              <div class="sort-body" :class="{show:showChart==0}"></div>
            </div>
          </div>
          <div class="bar-item">
            <div class="bar-color blue"></div>
            <span class="text">收币数</span>
            <div @click="sortData(1)" class="sort">
              <div class="sort-head" :class="{showTop:showChart==1&&orderCoins==0,showBot:showChart==1&&orderCoins==1}"></div>
              <div class="sort-body" :class="{show:showChart==1}"></div>
            </div>
          </div>
          <div class="bar-item">
            <div class="bar-color orange"></div>
            <span class="text">收币金额</span>
            <div @click="sortData(2)" class="sort">
              <div class="sort-head" :class="{showTop:showChart==2&&orderMoney==0,showBot:showChart==2&&orderMoney==1}"></div>
              <div class="sort-body" :class="{show:showChart==2}"></div>
            </div>
          </div>
          <!-- 筛选弹窗 -->
          <div v-show="checkDialog" class="check_dialog">
            <div class="title">
              <span>按照机台收币筛选</span>
              <span @click="colseCheckDialog"><i class="el-icon-close"></i></span>
            </div>
            <el-select placeholder="请选择收币数" v-model="coins_min" style="width:90px">
              <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id" :disabled="start_disabled==item.id">
              </el-option>
            </el-select>
            <span style="color:#bfc4ce">—</span>
            <el-select filterable placeholder="请选择收币数" :disabled="end_disabled" v-model="coins_max" style="width:90px">
              <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-button size="small" type="primary" @click="goCheck">筛选</el-button>
            <div style="margin-top:10px">
              <el-checkbox v-model="is_mapping">仅关联礼品机台</el-checkbox><br>
              <el-checkbox style="margin:10px 0;" v-model="ratio_100">100%利率</el-checkbox><br>
              <el-checkbox v-model="ratio_minus">负利率和0利率</el-checkbox>
            </div>
          </div>
          <el-button style="padding:5px" size="small" type="primary" @click="checkCoins"><i style="fontSize:18px" class="el-icon-menu"></i></el-button>

        </div>
        <div style="padding-bottom:10px">
          <LineBarChart :chartData="chartData" :chartSet="chartSet" :chartType="chartType"></LineBarChart>
        </div>
      </el-row>
      <br>
      <br>
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label="机台名称">
          <template slot-scope="scope">
            <span>{{scope.row.area_name}} - {{scope.row.project_type}} - {{scope.row.no}} ID {{scope.row.project_id}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="机台利率" prop="profit" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.profit}}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收币数量" prop="coins" sortable></el-table-column>
        <el-table-column align="center" label="收币金额" prop="money" sortable></el-table-column>
        <el-table-column align="center" label="出货成本" prop="cost" sortable>
          <template slot-scope="scope">
            <el-button type="text" @click="showCost(scope.row)">{{scope.row.cost}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 弹框 -->
      <el-dialog :close-on-click-modal="false" width="600px" title="出货详情" :visible.sync="costDialog">
        <el-table highlight-current-row :data="dialogData" v-loading.body="listLoading" border size="small">
          <el-table-column align="center" label="出货信息" prop="name" label-class-name="header14px"></el-table-column>
          <el-table-column align="center" label="出货数量" prop="num" label-class-name="header14px"></el-table-column>
          <el-table-column align="center" label="出货成本" label-class-name="header14px" prop="cost"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 自定义底部 -->
  </div>
</template>
<script>
import { getStore, getArea, getChartData } from '@/api/dashboard/interestMonitor';
import LineBarChart from './components/LineBarChart';
import { pickerOptionsSevenDay, pickerDateF, optionMaxTime7, isToday, sortBy, pickerDateSevenDays } from '@/utils';
export default {
  components: {
    LineBarChart
  },
  data() {
    return {
      list: null,
      listLoading: false,
      loadingChart: false,
      checkDialog: false,
      costDialog: false,
      store_list: null,
      showChart: 0,
      orderRatio: 1,
      orderCoins: 1,
      orderMoney: 1,
      prevStoreId: 0,
      start_disabled: -1,
      end_disabled: false,
      area_list: [],
      type_list: [
        { id: 1, name: '考核类礼品机' },
        { id: 2, name: '彩票机' }
      ],
      total_list: [],
      dialogData: [],
      coins_min: '',
      coins_max: '',
      is_mapping: false,
      ratio_100: false,
      ratio_minus: false,
      look_del: '0',
      formInline: {
        store_id: '',
        type: 1,
        area_id: '',
        order_key: 'profit_difference',
        order_value: 'desc',
        coins_min: '',
        coins_max: '',
        is_mapping: 0,
        percentage: 0,
        negative: 0,
        begin_time: '',
        end_time: ''
      },
      chartData: {
        dimensions: ['project_id', 'profit_difference', 'coins', 'money'],
        source: []
      },
      chartSet: {
        xName: '卡头ID',
        yName: '利率偏差 ( % )'
      },
      chartType: [{ type: 'bar' }, { type: 'line' }, { type: 'line', color: '#ffa216' }],
      checkList: [
        { id: 0, name: 0 },
        { id: 1, name: 1 },
        { id: 2, name: 10 },
        { id: 3, name: 50 },
        { id: 4, name: 100 },
        { id: 5, name: '>100' }
      ],
      pickerOptions: pickerOptionsSevenDay(-1),
      pickerDate: pickerDateF()
    };
  },
  activated() {
    if (this.$route.params.store_id || !this.store_list) {
      this.getstore();
    }
  },
  methods: {
    //排序
    sortData(i) {
      if (i == 0) {
        if (this.showChart != 0) {
          this.showChart = 0;
          this.orderRatio = 0;
          this.formInline.order_key = 'profit_difference';
          this.formInline.order_value = 'asc';
          this.fetchData();
          return;
        }
        this.showChart = 0;
        if (this.orderRatio == 0) {
          this.orderRatio = 1;
          this.formInline.order_key = 'profit_difference';
          this.formInline.order_value = 'desc';
          this.fetchData();
        } else {
          this.orderRatio = 0;
          this.formInline.order_key = 'profit_difference';
          this.formInline.order_value = 'asc';
          this.fetchData();
        }
      } else if (i == 1) {
        if (this.showChart != 1) {
          this.showChart = 1;
          this.orderCoins = 0;
          this.formInline.order_key = 'coins';
          this.formInline.order_value = 'asc';
          this.fetchData();
          return;
        }
        this.showChart = 1;
        if (this.orderCoins == 0) {
          this.orderCoins = 1;
          this.formInline.order_key = 'coins';
          this.formInline.order_value = 'desc';
          this.fetchData();
        } else {
          this.orderCoins = 0;
          this.formInline.order_key = 'coins';
          this.formInline.order_value = 'asc';
          this.fetchData();
        }
      } else {
        if (this.showChart != 2) {
          this.showChart = 2;
          this.orderMoney = 0;
          this.formInline.order_key = 'money';
          this.formInline.order_value = 'asc';
          this.fetchData();
          return;
        }
        this.showChart = 2;
        if (this.orderMoney == 0) {
          this.orderMoney = 1;
          this.formInline.order_key = 'money';
          this.formInline.order_value = 'desc';
          this.fetchData();
        } else {
          this.orderMoney = 0;
          this.formInline.order_key = 'money';
          this.formInline.order_value = 'asc';
          this.fetchData();
        }
      }
    },
    getstore() {
      getStore({ look_del: this.look_del, category_id: 406 }).then(response => {
        this.store_list = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.store_list.length > 0) {
            this.formInline.store_id = this.store_list[0].id;
          }
        }
        if (this.$route.params.store_id) {
          this.formInline.store_id = this.$route.params.store_id;
          this.pickerDate = pickerDateSevenDays(-7, -1);
        }
        this.getarea();
      });
    },
    getarea() {
      getArea({ sid: this.formInline.store_id, category_id: 406 }).then(response => {
        response.unshift({ id: '', name: '全部区域' });
        this.area_list = response;
        if (this.list == null || this.$route.params.store_id) this.fetchData();
      });
    },
    // 搜索
    searchClick() {
      this.formInline.coins_min = '';
      this.formInline.coins_max = '';
      this.is_mapping = 0;
      this.coins_min = '';
      this.coins_max = '';
      this.showChart = 0;
      this.orderRatio = 1;
      this.orderCoins = 1;
      this.orderMoney = 1;
      this.formInline.order_key = 'profit_difference';
      this.formInline.order_value = 'desc';
      this.formInline.is_mapping = 0;
      optionMaxTime7(this.pickerDate).then(() => {
        //最大可选择时间区间
        if (!isToday(this.pickerDate[0]) && isToday(this.pickerDate[1])) {
          this.$message.error('查看历史数据不可包含今天');
          return;
        }
        this.fetchData();
      });
    },
    checkCoins() {
      this.checkDialog = true;
    },
    colseCheckDialog() {
      this.checkDialog = false;
    },
    goCheck() {
      if ((this.coins_max != '' && this.coins_min === '') || (this.coins_max === '' && this.coins_min != '')) {
        this.$message.error('请选择收币数');
        return;
      }
      if (this.coins_min == 5 && this.coins_max == 5) {
        this.formInline.coins_min = 101;
        this.formInline.coins_max = '';
      } else if (this.coins_min === '' && this.coins_max === '') {
        this.formInline.coins_max = '';
        this.formInline.coins_min = '';
      } else if (this.coins_min != 5 && this.coins_max == 5) {
        this.formInline.coins_min = this.checkList[this.coins_min].name;
        this.formInline.coins_max = '';
      } else if (this.coins_min > this.coins_max) {
        this.formInline.coins_min = this.checkList[this.coins_max].name;
        this.formInline.coins_max = this.checkList[this.coins_min].name;
      } else {
        this.formInline.coins_min = this.checkList[this.coins_min].name;
        this.formInline.coins_max = this.checkList[this.coins_max].name;
      }
      this.formInline.is_mapping = this.is_mapping ? 1 : 0;
      this.formInline.percentage = this.ratio_100 ? 1 : 0;
      this.formInline.negative = this.ratio_minus ? 1 : 0;
      this.fetchData();
      this.colseCheckDialog();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.chartData.source = [];

      this.formInline.begin_time = this.pickerDate[0].replace(/\./g, '-');
      this.formInline.end_time = this.pickerDate[1].replace(/\./g, '-');
      getChartData(this.formInline)
        .then(res => {
          res.forEach(val => {
            val.cost = Math.round(val.cost * 100) / 100;
            val.coins = val.coins / 1;
            val.money = Math.round(val.money * 100) / 100;
            val.profit = Math.round(val.profit * 10000) / 100;
            val.begin_time = this.pickerDate[0].replace(/\./g, '-');
            val.end_time = this.pickerDate[1].replace(/\./g, '-');
            val.profit_difference = Math.round(val.profit_difference * 10000) / 100;
          });
          this.list = JSON.parse(JSON.stringify(res));
          this.chartData.source = res;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    //列表弹窗
    showCost(row) {
      this.dialogData = [];
      this.costDialog = true;
      this.dialogData = row.gift;
    }
  },
  watch: {
    coins_min: function(val) {
      if (val == 5) {
        this.end_disabled = true;
        this.coins_max = 5;
      } else {
        this.end_disabled = false;
      }
    },
    coins_max: function(val) {
      if (val == 5) {
        this.start_disabled = 5;
      } else {
        this.start_disabled = -1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
div.customContainer {
  overflow-y: auto;
}
div.bar-legend {
  z-index: 100;
  position: absolute;
  top: 3%;
  right: 10%;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  div.bar-item {
    text-align: center;
    width: 100px;
    margin: 8px 13px 0 0;

    div.bar-color {
      width: 20px;
      height: 5px;
      margin: 0 auto;
      margin-right: 2px;
      display: inline-block;
    }
    div.bar-color-ratio {
      display: inline-block;
      margin-right: 2px;

      div {
        width: 10px;
        height: 5px;
        float: left;
      }
      div.one {
        background: #ff4242;
      }
      div.tow {
        background: #ff7c07;
      }
      div.three {
        background: #fdc927;
      }
      div.four {
        background: #93ed39;
      }
    }
    div.sort {
      display: inline-block;
      position: relative;
      width: 10px;
      cursor: pointer;
      div.sort-head {
        position: relative;
        top: -1px;
        left: 4px;
        width: 8px;
        height: 8px;
        border: 2px solid #888;
        border-bottom-color: transparent;
        border-right-color: transparent;
        transform: rotate(45deg);
      }
      div.sort-head.showTop {
        border-top-color: #409eff;
        border-left-color: #409eff;
      }
      div.sort-head.showBot {
        border-top-color: #409eff;
        border-left-color: #409eff;
        transform: rotate(225deg);
        top: 2px;
      }
      div.sort-body {
        position: absolute;
        top: -1px;
        left: 7px;
        width: 2px;
        height: 12px;
        background: #888;
      }
      div.sort-body.show {
        background: #409eff;
      }
    }
    div.bar-color.blue {
      background: #5e9bdf;
    }
    div.bar-color.yellow {
      background: #fdc927;
    }
    div.bar-color.orange {
      background: #ff8f2b;
    }
  }
}
</style>
